<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/bootstrap.css">

	<title>Bootstrap 4</title>
</head>
<body>


	<h3>Валидация формы</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<form class="myForm" novalidate>
					<div class="form-group row">
						<label class="col-3" for="exampleInputEmail1">Email адресс</label>
						<input type="email" class="form-control col-9" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email адресс" required>
						<div class="valid-feedback">
							вы ввели верно
						</div>
						<div class="invalid-feedback">
							ошибка
						</div>
					</div>
					<div class="form-group row">
						<label class="col-3" for="exampleInputPassword1">пароль</label>
						<input type="password" class="form-control col-9" id="exampleInputPassword1" placeholder="пароль" required>
						<div class="invalid-feedback">
							ошибка
						</div>
						<div class="valid-feedback">
							вы ввели верно
						</div>
					</div>
					<div class="form-group">
						<label for="exampleFormControlSelect1">Example select</label>
						<select class="form-control" id="exampleFormControlSelect1" required>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>
					<div class="form-row">
						
						<div class="custom-control custom-ckeckbox">
							<input type="checkbox" class="custom-control-input" required id="custom1">
							<label for="custom1" class="custom-control-label">Выберите меня</label>
							<div class="invalid-tooltip">это обязательно выбрать</div>
						</div>
						<div class="custom-control custom-radio">
							<input type="radio" name="customform" class="custom-control-input" required id="custom2">
							<label for="custom2" class="custom-control-label">Выберите меня</label>
							<div class="invalid-tooltip">это обязательно выбрать</div>
						</div>
						<div class="custom-control custom-radio">
							<input type="radio" name="customform" class="custom-control-input" required id="custom3">
							<label for="custom3" class="custom-control-label">Выберите меня</label>
							<div class="invalid-tooltip">это обязательно выбрать</div>
						</div>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
	</div>


	<h3>Карусель</h3>
	<div class="container">
		<div class="row">
			<div class="col-7">
				<div id="carouselMy" class="carousel my-carousel  slide" data-ride="carousel">
					<div class="carousel-inner">
						<div class="carousel-item active">
							<img class="d-block w-100" src="img/rys.jpg" >
							<div class="carousel-caption">
								<h6>Slide 1</h6>
								<p>Lorem ipsum dolor sit.</p>
							</div>
						</div>
						<div class="carousel-item">
							<img class="d-block w-100" src="img/redkie-zhivotnie-krasniy-volk.jpg"">
							<div class="carousel-caption">
								<h6>Slide 2</h6>
								<p>Lorem ipsum dolor sit.</p>
							</div>
						</div>
						<div class="carousel-item">
							<img class="d-block w-100" src="img/1.jpg">
							<div class="carousel-caption">
								<h6>Slide 3</h6>
								<p>Lorem ipsum dolor sit.</p>
							</div>
						</div>
					</div>
					<a class="carousel-control-prev" href="#carouselMy" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					</a>
					<a class="carousel-control-next" href="#carouselMy" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
					</a>
					<ol class="carousel-indicators">
						<li data-target="#carouselMy" data-slide-to="0" class="active"></li>
						<li data-target="#carouselMy" data-slide-to="1"></li>
						<li data-target="#carouselMy" data-slide-to="2"></li>
					</ol>
				</div>
			</div>
		</div>
	</div>


	<h3>Коллапс</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<p>
					<button class="btn btn-primary" type="button" data-target="#collapseExample1" data-toggle="collapse"  aria-controls="collapseExample1">1</button>
					<button class="btn btn-primary" type="button" data-target="#collapseExample2" data-toggle="collapse"  aria-controls="collapseExample2">2</button>
					<button class="btn btn-primary" type="button" data-target=".collaple" data-toggle="collapse"  aria-controls="collapseExample1 collapseExample2">1,2</button>
				</p>
				<div class="row">
					<div class="col">
						<div class="collaple" id="collapseExample1">
							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
						</div>
					</div>
					<div class="col">
						<div class="collaple" id="collapseExample2">
							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<h3>Акордеон</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div id="accordion">
					<div class="card">
						<div class="card-header" id="headingOne">
							<h5>
								<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Heading 1</button>
							</h5>
						</div>
						<div class="collapse show" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordion">
							<div class="card-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ex harum repellendus quis a rerum numquam fuga, beatae sint, repellat omnis placeat possimus incidunt, optio consectetur perspiciatis adipisci, libero velit.</p>
							</div>
						</div>
					</div>
					<div class="card">
						<div class="card-header" id="headingTwo">
							<h5>
								<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Heading 2</button>
							</h5>
						</div>
						<div class="collapse"  id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordion">
							<div class="card-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias accusantium aperiam repudiandae delectus, ea non quos. Labore perferendis neque totam doloribus, nisi amet facilis distinctio laborum modi, optio, asperiores quos!</p>
							</div>
						</div>
					</div>
					<div class="card">
						<div class="card-header" id="headingThree">
							<h5>
								<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Heading 3</button>
							</h5>
						</div>
						<div class="collapse" id="collapseThree" aria-labelledby="headingThree" data-parent="#accordion">
							<div class="card-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt fugit facilis vel quas praesentium adipisci vero dolor magnam nostrum tenetur nam, eaque officiis ratione eligendi harum fugiat voluptatem minima et?</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<h3>Лист групп</h3>
	<div class="container">
		<div class="row">
			<div class="row">
				<div class="col-4">
					<div class="list-group" id="list-tab" role="tablist">
						<a class="list-group-item list-group-item-success active" id="list-home-list" data-toggle="list" href="#list-home" >
							Home
							<span class="badge badge-primary">25</span>
						</a>
						<a class="list-group-item list-group-item-success" id="list-profile-list" data-toggle="list" href="#list-profile" >
							Profile
							<span class="badge badge-primary">25</span>
						</a>
						<a class="list-group-item list-group-item-success" id="list-messages-list" data-toggle="list" href="#list-messages">
							Messages
							<span class="badge badge-primary">25</span>
						</a>
						<a class="list-group-item list-group-item-success" id="list-settings-list" data-toggle="list" href="#list-settings">
							Settings
							<span class="badge badge-primary">25</span>
						</a>
					</div>
				</div>
				<div class="col-8">
					<div class="tab-content" id="nav-tabContent">
						<div class="tab-pane fade show active" id="list-home" aria-labelledby="list-home-list">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo consequuntur fugit, repellat. Et, voluptates, error. Repudiandae doloremque aliquam aspernatur nam.
						</div>
						<div class="tab-pane fade" id="list-profile" aria-labelledby="list-profile-list">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis cumque amet soluta, expedita adipisci exercitationem, aspernatur sapiente. Eum, iusto, rem.
						</div>
						<div class="tab-pane fade" id="list-messages" aria-labelledby="list-messages-list">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe porro veniam rem excepturi autem inventore nobis ipsum labore libero praesentium.
						</div>
						<div class="tab-pane fade" id="list-settings" aria-labelledby="list-settings-list">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis unde, incidunt voluptate est cum sunt autem nisi quod laudantium repellat.
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<h3>Модальное окно</h3>
	<div class="container">
		<div class="row">
			<!-- Button trigger modal -->
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
			Launch demo modal
			</button>

			<!-- Modal -->
			<div class="modal fade" id="Modal">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title">Произвольное окно</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate magnam, soluta cumque molestias nemo in, consectetur recusandae eveniet nostrum ratione temporibus, sint consequatur quae? Sunt iusto eos laboriosam fugiat voluptatibus.</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
							<button type="button" class="btn btn-primary">Save changes</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		
	

	
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
	<script src="js/main.js"></script>
</body>
</html>